1、关于CSS position的一些小例子验证
2、关于外边距合并的小例子验证
CSS position and margin collapse
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test absolute</title>
<style type="text/css">
#div1 {
position: absolute;
background-color: green;
top: 500px;
left: 300px;
width: 300px;
height: 300px;
}
#div2 {
position: absolute;
background-color: red;
top: 200px;
left: 200px;
width: 200px;
height: 300px;
}
#div3 {
/*position: absolute;*/
position: relative;
background-color: pink;
/*left: 5px;*/
top: 100px;
width: 200px;
height: 400px;
}
#div4 {
background-color: yellow;
width: 200px;
height: 400px;
}
#div5{
background-color: black;
width: 200px;
height: 400px;
position: relative;
top: 20px;
}
#div6{
background-color: #234422;
width: 20px;
height: 40px;
position: absolute;
/*position: relative;*/
left: 50px;
top: 100px;
}
#div7{
background-color: #cccccc;
width: 20px;
height: 40px;
/*position: absolute;*/
/*position: relative;*/
/*left: 25px;*/
margin-left: 50px;
margin-top: 1px;
}
#div8{
background-color: #676767;
width: 20px;
height: 40px;
}
</style>
</head>
<body>
<!-- 结论：1、两个使用position: absolute脱离文档流的元素的层级关系是：默认是写在后面的元素层级在写在前面的元素之上
2、父元素使用position: absolute，使用top,left去移动父元素时，子元素也会跟着父元素一起移动
3、若父元素内的子元素也使用position: abso5ute，使用top,left去移动子元素时，是相对于父元素移动位置的
4、使用position: relative的元素是不能脱离文档流的，即使使用top、left使之偏移原本位置，但实际上该元素在文档中还是占用原来的位置，即位于该元素之后的元素的布局还是相对于偏移前的位置来定位的。
5、父元素使用position: relative，子元素使用position: absolute，则子元素使用top、left偏移时是相对于父元素来定位的，且脱离文档流
6、使用float也能使元素脱离文档流，但是文档中的文字等行内元素是会自动环绕在float元素的周围的，以此可以实现文字环绕图片的效果。如果想设置了float的元素下面的元素不受float影响，即照常位于float元素之后，则需要对之用clear清除浮动的影响。
-->
<div id="div1">
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="div2"></div>
<div id="div5">
<div id="div6">d6</div>
<div id="div7">d7</div>
<div id="div8"></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style type="text/css">
#div1 {
position: relative;
width: 200px;
height: 200px;
background-color: black;
/*top: 2px;*/
padding-top: 82px;
}
#div2 {
background-color: red;
width: 100px;
height: 100px;
/*margin-top: 122px;*/
}
#div3 {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
top: 5px;
}
#div4 {
background-color: red;
width: 100px;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<!-- 子元素使用margin-top时，并不会相对父元素偏移，而是使父元素增加了margin-top,而子元素的上边框依旧紧贴着父元素，并不会产生margin边距，这里涉及到外边距合并的知识，详情参考：http://www.w3school.com.cn/css/css_margin_collapsing.asp -->
<!-- 解决方案有：1、子元素设置border，将两者的外边距margin分隔开；
2、对父元素使用padding来设计与子元素之间的边距(这个方法较好)； -->
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3">
<div id="div4"></div>
</div>
<span>aa!</span> -->
</body>
</html>
